<template>
    <div class="login-box">
        <div class="login-box-right">
            <div class="login-form">
                <img src="@/assets/images/login/logo2.png" class="login-logo" />
                <div class="login-title">南通经济技术开发区网安智能防控平台</div>
                <div class="login-input">
                    <a-input placeholder="请输入账号" class="large-input" @keyup.enter="login()" v-model:value="loginData.loginId">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-user.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input type="password" placeholder="请输入密码" @keyup.enter="login()" class="large-input" v-model:value="loginData.loginPw">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-pwd.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input" v-if="loginErrorNum > 2">
                    <a-input placeholder="请输入验证码" class="large-input" @keyup.enter="login()" v-model:value="loginData.imageCode">
                    </a-input>
                    <img @click="changeImg()" :src="imgUrl + '?imageVerifyCodeId=' + loginData.imageVerifyCodeId + '&v='+timer" class="code-image" />
                </div>
                <div style="text-align:left;padding: 0 30px;">
                    <a-checkbox class="remember" v-model:checked="remember">记住密码</a-checkbox>
                    <!-- <router-link to="/forgetPwd" class="forget">忘记密码</router-link> -->
                    <a class="forget" @click="countDown">忘记密码</a>
                </div>
                <div>
                    <a-button type="primary" block class="login-btn" @click="login()">登录</a-button>
                    <!-- <router-link to="/register">免费注册</router-link> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import {Input,Checkbox,Button} from "ant-design-vue";
import request from "@/util/httpUtils";
import baseUtil from "@/util/baseUtil";
import { Modal } from 'ant-design-vue';
export default {
    components:{
        AInput:Input,
        ACheckbox:Checkbox,
        AButton:Button
    }, 
    data() {
        return {
            loginData:{
                loginId:'',
                loginPw:'',
                imageCode:'',
                imageVerifyCodeId:'',
            },
            loginErrorNum:0,
            imgData:'',
            remember:false,
            imgUrl: request.defaults.baseURL + httpRequest.api['生成图形验证码']
        };
    },
    created(){

    },
    mounted() {
        // localStorage.removeItem('token');
        document.title = '南通经济技术开发区网安智能防控平台-登录';
        this.remember = localStorage.getItem("remember")? JSON.parse(localStorage.getItem("remember")) : false;
        if(this.remember){
            const loginText = localStorage.getItem("login");
            if(loginText){
                const login = JSON.parse(loginText);
                this.loginData.loginId = login.loginId;
                this.loginData.loginPw = login.loginPw;
            }
        }
        httpRequest.post("生成图形验证码唯一id", {}).then(res => {
            console.log(res,'res.data.imageVerifyCodeId');
            this.loginData.imageVerifyCodeId = res.data.imageVerifyCodeId;
            // httpRequest.get("生成图形验证码", { imageVerifyCodeId: res.data.imageVerifyCodeId }).then((res) => {
            //     console.log(res);
            // });
        });
    },
    methods: {
        login(){
             httpRequest.post("登录", this.loginData).then((res) => {
                 localStorage.setItem("token",res.data.token);
                 localStorage.setItem("user",JSON.stringify(res.data));
                 localStorage.setItem("remember",this.remember);
                 localStorage.setItem("roleId",JSON.stringify(res.data.roleId))
                 if(this.remember){
                     localStorage.setItem("login",JSON.stringify({loginId:this.loginData.loginId,loginPw:this.loginData.loginPw}));
                 }
                 this.$router.push("/home");
                 baseUtil.getroleOptions();
            }).catch(e=>{
                if(e.status == '1022'){
                    this.loginErrorNum = 3;
                }else if(e.status == '1000'){
                    this.loginErrorNum = e.data.loginErrorNum;
                    if(this.loginErrorNum > 2){
                        this.changeImg();
                    }
                }else if(e.status == '1023'){
                    this.changeImg();
                }
            });
        },
        changeImg(){
            this.timer = new Date().getTime();
        },
        countDown(){
            Modal.warning({
                title: '忘记密码了？',
                content: `请联系辖区分局管理员重置密码！`,
                okText:'知道了'
            });
        }
    },
};
</script>

<style lang="less" scoped>
.login-box{
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #102C51, #030B27);
    &-right{
        position: relative;
        top: 20%;
        margin: auto;
        width: 494px;
        height: 516px;
        background: #020B2E;
        border-radius: 13px;
        padding: 40px 50px;
        .login-logo{
            margin-bottom: 20px;
        }
        .login-form{
            display: block;
            .login-title{
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #E4E4E4;
            }
            .forget{
                float: right;
            }
            .remember{
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
                color: #eee;
            }
            .login-input{
                height: 40px;
                background: #B4B4B4;
                border-radius:5px;
                margin: 20px;
                display: flex;
                .code-image{
                    width: 140px;
                    height: 40px;
                }
            }
        }
        .large-input{
            padding: 10px 11px;
        }
        .login-btn{
            width: 360px;
            height: 40px;
            line-height: 40px;
            padding:0;
            border-radius: 8px;
            margin-top: 50px;
            margin-bottom: 15px;
            font-size: 20px;
        }
    }
}
</style>
